<template>
 <el-form-item :label-width="item.labelWidth?item.labelWidth:'130px'" :label="item.title" :prop="rules?item.field:''">
    <span slot="label">{{item.title}}
      <el-tooltip v-if="item.info" :content="item.info" placement="top">
        <span class="fas fa-info-circle color"></span>
      </el-tooltip>
    </span>
    <el-cascader
      :options="list"
      :change-on-select="false"
      filterable
      :props = "props"
      :show-all-levels= "false"
      v-model="checked"
      @change="change"
      :disabled="disabled">
    </el-cascader>
  </el-form-item>

</template>
<style>
.el-cascader {
  width: 100%;
}
</style>

<script>
// form[item.field]
import { getUserTree } from '../../../api/common';
export default {
  props: ['item', 'form', 'disabled', 'rules'],
  data() {
    return {
      props: {
        disabled: 'isUser'
      },
      list: [],
      selectedOptions: [],
      checked: [],
      casual: [],
      userOrgId: '',
      treeLeve: 0
    };
  },
  mounted: function() {
    this.checked = [];
    if (this.form[this.item.field]) {
      this.userOrgId = this.form[this.item.field];
    }
    getUserTree()
      .then(response => {
        const data = response.data;
        this.formatTree(data);
        this.list = data;
      })
      .catch(response => {
        // console.log(response)
      });
  },
  methods: {
    change(v) {
      this.form[this.item.field] = this.checked[this.checked.length - 1];
      if (this.item.formChange) {
        this.item.formChange(this.form, this.item);
      }
      if (this.item.itemChange) {
        this.item.itemChange(this.form, this.item, v);
      }
    },
    formatTree(tree) {
      if (!tree) {
        return;
      }
      tree.forEach(element => {
        element.value = element.id;
        element.label = element.text;
        if (element.isEmployee === '0') {
          element.isUser = true;
        }
        if (element.isEmployee === '1') {
          element.isUser = false;
        }
        if (element.children) {
          element.isUser = false;
        }
        this.casual[this.treeLeve] = element.id;
        if (element.id === this.userOrgId) {
          this.casual.some(v => {
            if (v === this.userOrgId) {
              this.checked.push(v);
              return false;
            }
            this.checked.push(v);
          });
        }

        if (element.children) {
          this.treeLeve = this.treeLeve + 1;
          this.formatTree(element.children);
          this.treeLeve = this.treeLeve - 1;
        }
      });
    }
  }
};
</script>
